import React, { useState } from 'react';
import { Steps, Row, Col } from 'antd';
import { randomKey } from '../../../../utils/utils';
import Step1 from './step1';
import Step2 from './step2';
import Step3 from './step3';
import '../operator.less';

const { Step } = Steps;

export default function(props) {
  const [step01Key, setStep01Key] = useState('step01');
  const [current, setCurrent] = useState(0);
  const [fileId, setFileId] = useState('');
  const [data, setData] = useState({});

  const steps = [
    {
      title: '上传文件',
    },
    {
      title: '确认导入数据',
    },
    {
      title: '导入到系统',
    },
  ];

  //返回第一步，清空所有数据
  function goStepOne() {
    setCurrent(0);
    setFileId('');
    setStep01Key(randomKey());
  }

  function goStepTwo(value) {
    setCurrent(1);
    setFileId(value);
  }
  function goStepThree(data) {
    setCurrent(2);
    setData(data);
  }
  console.log(fileId);

  return (
    <div className='strategy-operater-wp'>
      <div className='strategy-operater-hd'>
        <Row type='flex' justify='center'>
          <Col span={12}>
            <Steps current={current}>
              {steps.map((item) => (
                <Step key={item.title} title={item.title} />
              ))}
            </Steps>
          </Col>
        </Row>
      </div>
      {current === 0 && (
        <>
          <Step1 goto={(value) => goStepTwo(value)} key={step01Key} />
        </>
      )}
      {current === 1 && (
        <>{fileId && <Step2 file_id={fileId} goto={(data) => goStepThree(data)} goPrev={goStepOne} />}</>
      )}
      {current === 2 && (
        <>
          <Step3 file_id={fileId} data={data} />
        </>
      )}
    </div>
  );
}
